<txp:rvm_privileged /><html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="/textpattern/jquery.js"></script>
<script src="http://dev.shiftyfrog.com/jobber18/api/api.php?action=getJobs&type=0&category=0&count=999&random=0&days_behind=999&response=json" 
type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">  
function initialize() {
   var myOptions = {
      zoom : 2, 
      center : new google.maps.LatLng( 0, 0), 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
      }
   var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
   setMarkers(map, jobs); 
   }
  
function setMarkers(map, locations) {
var geocoder = new google.maps.Geocoder;
    for (var i = 0; i < locations.length; i++) {
      var job = locations[i]; 
      var loc = new Array();
      if (job.latlng!=null&&job.latlng!=""){
      loc = job.latlng.split(',',2);
            }else{
            //not working
      
      geocoder.geocode( { 'address': job.location}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          //loc = results[0].geometry.location.split(',',2);
          alert('goe='+results[0].geometry.location.toString());
          }    
          }  
        );
      }
      var myLatLng = new google.maps.LatLng(loc[0], loc[1]); 
      var contentString = "<a target=\"_blank\" href=\"http://dev.shiftyfrog.com/jobber18/job/" + job.id + "/" + job.url_title + "//\">" + job.title + " (" + job.location + ")</a>";
     createMarker(myLatLng,map,job.title,i,contentString);
      }
    }
function createMarker(latlng,map,title,zindex,myContent){
   // Add markers to the map 
   // Marker sizes are expressed as a Size of X,Y 
   // where the origin of the image (0,0) is located 
   // in the top left of the image. 
   // Origins, anchor positions and coordinates of the marker 
   // increase in the X direction to the right and in 
   // the Y direction down. 
   var image = new google.maps.MarkerImage('/images/99.png', 
   // This marker is 20 pixels wide by 32 pixels tall. 
   new google.maps.Size(20, 32), 
   // The origin for this image is 0,0. 
   new google.maps.Point(0,0), 
   // The anchor for this image is the base of the flagpole at 0,32. 
   new google.maps.Point(0, 32)); 
   var shadow = new google.maps.MarkerImage('/images/98.png', 
   // The shadow image is larger in the horizontal dimension 
   // while the position and offset are the same as for the main image. 
   new google.maps.Size(37, 32), 
   new google.maps.Point(0,0), 
   new google.maps.Point(0, 32)); 
   // Shapes define the clickable region of the icon. 
   // The type defines an HTML <area> element 'poly' which 
   // traces out a polygon as a series of X,Y points. The final 
   // coordinate closes the poly by connecting to the first 
   // coordinate. 
   var shape = { 
    coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
    type: 'poly' 
    }; 
    var infowindow = new google.maps.InfoWindow({
        content: myContent
        });
      var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        shadow: shadow, 
        icon: image, 
        shape: shape, 
        title: title, 
        zIndex: zindex 
        }); 
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
          });
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>